import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:series_play/comm/base/base_state.dart';
import 'package:series_play/comm/ext/context_ext.dart';
import 'package:series_play/comm/ext/num_ext.dart';

import 'package:series_play/pages/search/controller/search_controller.dart'
    as search;

import '../../comm/dialog_helper.dart';
import '../../generated/assets.dart';
import '../../widget/app_color.dart';
import '../../widget/app_image.dart';
import '../../widget/app_text.dart';
import '../../widget/series_tag.dart';

class SearchDefaultPage extends StatefulWidget {
  final search.SearchController searchController;

  const SearchDefaultPage(this.searchController, {super.key});

  @override
  State<SearchDefaultPage> createState() => _SearchDefaultPageState();
}

class _SearchDefaultPageState extends BaseState<SearchDefaultPage> {
  final searchTabs = ['搜索', '你好', '哈哈哈', '干什么', '恋爱', '无脑', '看星星', '无脑', '看星星'];

  search.SearchController get mController => widget.searchController;

  @override
  Widget buildPage(BuildContext context) {
    return Container(
      padding: const EdgeInsets.only(left: 16, right: 16, top: 8).w,
      child: Column(
        children: [
          Row(
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              AppText.title(context.tr.search, color: AppColor.white_40),
              const Spacer(),
              AppImage(
                Assets.imagesIcDustbin,
                size: 16,
                color: AppColor.white_40,
                onTap: () {

                  DialogHelper.showSimpleDialog(context , title: '是否清除搜索记录?' , onConfirm: (){

                  });

                },
              ),
            ],
          ),
          16.verticalSpace,
          // 搜索
          Row(
            mainAxisSize: MainAxisSize.min,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Expanded(
                child: Wrap(
                  direction: Axis.horizontal,
                  runAlignment: WrapAlignment.start,
                  crossAxisAlignment: WrapCrossAlignment.start,
                  spacing: 16.w,
                  runSpacing: 16.w,
                  children: searchTabs
                      .map(
                        (e) =>
                            AppText(e, fontSize: 13, color: AppColor.white_40),
                      )
                      .toList(),
                ),
              ),
            ],
          ),

          24.verticalSpace,

          Expanded(
            child: ListView.separated(
              itemBuilder: (context, index) {
                if (index == 0) {
                  return Obx(() => _rankList(1, mController.hotSearchList));
                }
                return Obx(() => _rankList(2, mController.hotFireList));
              },
              itemCount: 2,
              separatorBuilder: (context, index) {
                return 16.horizontalSpace;
              },
              scrollDirection: Axis.horizontal,
            ),
          ),
        ],
      ),
    );
  }

  @override
  Color getBackgroundColor() {
    return Colors.transparent;
  }

  @override
  bool hideAppbar() => true;

  Widget _rankList(int type, List<String> list) {
    return Container(
      padding: const EdgeInsets.only(left: 14, top: 14, right: 14).w,
      width: 0.7.sw,
      decoration: BoxDecoration(
        border: Border.all(color: Color(0xFFF2416F), width: 1.w),
        borderRadius: BorderRadius.only(
          topLeft: Radius.circular(10).r,
          topRight: Radius.circular(10).r,
        ),
      ),
      child: Column(
        children: [
          Row(
            children: [
              AppImage(
                type == 1 ? Assets.imagesIcHotSearch : Assets.imagesIcHotFire,
                width: 16,
              ),
              6.horizontalSpace,
              _getMaskText(
                type == 1 ? context.tr.hotSearches : context.tr.hotVideos,
              ),
            ],
          ),
          12.verticalSpace,
          // 榜单内容
          Expanded(
            child: ListView.separated(
              itemBuilder: (context, index) {
                return Row(
                  children: [
                    Container(
                      width: 78.w,
                      height: 100.w,
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(8).r,
                        image: DecorationImage(
                          image: NetworkImage(list[index]),
                          fit: BoxFit.cover,
                        ),
                      ),
                      child: Stack(
                        children: [
                          Positioned(
                            top: 2.w,
                            left: 2.w,
                            child: Container(
                              width: 14.w,
                              height: 16.w,
                              decoration: BoxDecoration(
                                image: DecorationImage(
                                  image: AssetImage(index.getRankBadge()),
                                  fit: BoxFit.fill,
                                ),
                              ),
                              alignment: Alignment.center,
                              child: AppText(
                                '${index + 1}',
                                color: AppColor.white,
                                fontSize: 11,
                              ),
                            ),
                          ),
                        ],
                      ),
                    ),
                    10.horizontalSpace,
                    Expanded(
                      child: Container(
                        padding: const EdgeInsets.symmetric(vertical: 3).w,
                        height: 100.w,
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          mainAxisSize: MainAxisSize.max,
                          children: [
                            AppText(
                              '我是一个标题标题标题',
                              fontSize: 15,
                              fontWeight: FontWeight.bold,
                              color: AppColor.white,
                              maxLines: 2,
                            ),
                            const Spacer(),
                            AppText(
                              '100w热搜',
                              color: AppColor.white_40,
                              fontSize: 12,
                            ),
                            4.verticalSpace,
                            SeriesTag('诸多人在追'),
                          ],
                        ),
                      ),
                    ),
                  ],
                );
              },
              itemCount: list.length,
              separatorBuilder: (context, index) {
                return 10.verticalSpace;
              },
            ),
          ),
        ],
      ),
    );
  }

  Widget _getMaskText(String text) {
    return ShaderMask(
      shaderCallback: (bounds) {
        return const LinearGradient(
          begin: Alignment.centerLeft,
          end: Alignment.centerRight,
          colors: [Color(0xffd90f52), Color(0xfff99917), Color(0xffd90f52)],
        ).createShader(bounds);
      },
      blendMode: BlendMode.srcIn,
      child: AppText(text, fontSize: 16),
    );
  }
}
